<template>
    <a-modal :confirm-loading="modalOption.loading" :okText="modalOption.okText" @ok="modalOption.onOk"
             @cancel="modalOption.onCancel" :cancelText="modalOption.cancelText" :width="modalOption.width" :visible="visible"
             :title="modalOption.title">
        <a-spin tip="loading" :spinning="loading">
            <div class="container">
                <a-form-model ref="formModel" :label-col="formOption.labelCol" :wrapper-col="formOption.wrapperCol"
                              :layout="formOption.layout" :label-align="formOption.labelAlign" :hide-required-mark="formOption.hideRequiredMark"
                              :rules="formOption.rules" :model="formOption.formData">

                    <div v-for="(item, index) in formOption.formData.recheckList" :key="index" style="border: 1px solid #eee; padding: 20px; margin-bottom: 20px;">
                        <a-row :gutter="16">
                            <a-col :span="12">
                                <a-form-model-item label="复检状态：">
                                    <a-input :value="`F${index+1}`" disabled />
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-model-item label="复检结果" :prop="`recheckList.${index}.recheckResult`" :rules="{ required: true, message: '请选择复检结果' }">
                                    <a-select :disabled="item.disabled" v-model="item.recheckResult" placeholder="请选择复检结果">
                                        <a-select-option value="药典合格">药典合格</a-select-option>
                                        <a-select-option value="国标合格">国标合格</a-select-option>
                                        <a-select-option value="省标合格">省标合格</a-select-option>
                                        <a-select-option value="不合格">不合格</a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="16">
                            <a-col :span="12">
                                <a-form-model-item :label="`${item.recheckResult||''}复检取样时间`" :prop="`recheckList.${index}.recheckTakeDate`" :rules="{ required: true, message: '请选择取样时间' }">
                                    <a-date-picker valueFormat="YYYY-MM-DD" :disabled="item.disabled" v-model="item.recheckTakeDate" style="width: 100%" :locale="locale" placeholder="请选择取样时间" />
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-model-item :label="`${item.recheckResult||''}复检取样量`" :prop="`recheckList.${index}.recheckTakeNum`" :rules="{ required: true, message: '请输入取样量' }">
                                    <a-input-number :disabled="item.disabled" v-model="item.recheckTakeNum" style="width: 100%" placeholder="请输入取样量" />
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="16">
                            <a-col :span="12">
                                <a-form-model-item :label="`${item.recheckResult||''}复检放行时间`" :prop="`recheckList.${index}.recheckReleaseDate`" :rules="{ required: true, message: '请选择放行时间' }">
                                    <a-date-picker valueFormat="YYYY-MM-DD" :disabled="item.disabled" v-model="item.recheckReleaseDate" style="width: 100%" :locale="locale" placeholder="请选择放行时间" />
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="12" style="text-align: right;">
                                <a-button v-if="index > 0" type="danger" @click="removeRecheckItem(item.id)">删除</a-button>
                            </a-col>
                        </a-row>
                    </div>
                    <a-button type="dashed" style="width: 100%" @click="addRecheckItem" :disabled="formOption.formData.recheckList.length >= 5">
                        <a-icon type="plus" /> 添加复检信息
                    </a-button>

                </a-form-model>
            </div>
        </a-spin>
         <div slot="footer">
            <a-button size="large" @click="modalOption.onCancel">取 消</a-button>
            <a-button size="large" type="primary" @click="modalOption.onOk">确 定</a-button>
        </div>
    </a-modal>
</template>
<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import locale from "ant-design-vue/lib/date-picker/locale/zh_CN";
import nextApi from "@/api/nextApi";

@Component({})
export default class Recheck extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Prop({default:{}}) formData!: any;
    @Prop({default:''}) editId!: string;

    locale = locale;
    loading = false;

    modalOption: any = {
        width: "70%",
        title: "复检操作",
        okText: "确认复检",
        cancelText: "取消",
        loading: false,
        onOk: () => {
            this.modalOk();
        },
        onCancel: () => {
            this.closeModal();
        },
    };

    formOption: any = {
        labelCol: { style: { width: "160px" } },
        wrapperCol: { style: {width:'calc(100% - 160px)'}},
        layout: "horizontal",
        labelAlign: "right",
        hideRequiredMark: false,
        formData: {
            recheckList: [
                {
                    recheckState:undefined,
                    recheckResult: undefined,
                    recheckTakeDate: undefined,
                    recheckTakeNum: undefined,
                    recheckReleaseDate: undefined,
                }
            ],
        },
        rules: {
            // 动态表单的规则在v-for中定义
        },
    };

    @Watch('visible')
    onVisibleChange(val: boolean) {
        if (val) {
            // 当modal显示时，查询复检数据，则填充
            if (this.editId) {
                this.getInfoById()
            }
        }else{
            if (this.$refs.formModel) {
                (this.$refs.formModel as any).resetFields();
            }
        }
    }
    async getInfoById(){
        const res = await nextApi.getRecheckData({medicinalStockId:this.editId})
        if(res?.data?.length){
            this.formOption.formData.recheckList = res.data.map((item:any)=>{
                return {
                    ...item,
                    disabled:true
                }
            })
        }else{
            this.formOption.formData.recheckList = [
                    {
                        recheckState:undefined,
                        medicinalStockId:this.editId,
                        recheckResult: undefined,
                        recheckTakeDate: undefined,
                        recheckTakeNum: undefined,
                        recheckReleaseDate: undefined,
                    }
                ];
        }
        
    }
    addRecheckItem() {
        if (this.formOption.formData.recheckList.length < 5) {
            const newIndex = this.formOption.formData.recheckList.length + 1;
            this.formOption.formData.recheckList.push({
                recheckState:undefined,
                medicinalStockId:this.editId,
                recheckResult: undefined,
                recheckTakeDate: undefined,
                recheckTakeNum: undefined,
                recheckReleaseDate: undefined,
            });
        }
    }

    async removeRecheckItem(id:string) {
        const res = await nextApi.delRecheckData({recheckId:id})
        this.$message.success(res.msg)
        this.getInfoById()
    }

    modalOk() {
        (this.$refs.formModel as any).validate(async (valid: boolean) => {
            if (valid) {
                let paramsArr = this.formOption.formData.recheckList.map((item,i)=>{
                    return {
                        ...item,
                        recheckState:`F${i+1}`
                    }
                })
                const res = await nextApi.addRecheckData(paramsArr)
                this.$message.success(res.msg)
                this.closeModal();
            }
        });
    }

    closeModal() {
        this.formOption.formData.recheckList = [
            {
                medicinalStockId:this.editId,
                recheckResult: undefined,
                recheckTakeDate: undefined,
                recheckTakeNum: undefined,
                recheckReleaseDate: undefined,
            }
        ];
        this.$emit("closeModal");
    }
}
</script>
<style scoped lang="scss">
.container {
    padding: 20px;
    .ant-form-item {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 24px;
    }
    .ant-form-item-label {
        text-align: right;
        padding-right: 8px;
    }
    .ant-form-item-control {
        text-align: left;
    }
}
</style> 